<template>
  <div>
    <van-nav-bar title="财务报表" left-text="返回" left-arrow v-back />
    <div class="finance-container">
      <finance-date-choose @dateChange="dateChange"></finance-date-choose>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="points"></van-icon>
          商品统计
        </div>
        <div class="tab-tr tab-header">
          <div class="tab-td tab-td__50">商品</div>
          <div class="tab-td">销量</div>
          <div class="tab-td">销售额</div>
        </div>
        <div class="tab-tr" v-for="item in sellList">
          <div class="tab-td tab-td__50">{{item.waterName}}</div>
          <div class="tab-td">{{item.num}}</div>
          <div class="tab-td">{{item.sum}}元</div>
        </div>
      </div>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="points"></van-icon>
          分类统计
        </div>
        <div class="tab-tr tab-header">
          <div class="tab-td tab-td__20"></div>
          <div class="tab-td">销量</div>
          <div class="tab-td">销售额</div>
        </div>
        <div class="tab-tr">
          <div class="tab-td tab-td__20">水厂商品</div>
          <div class="tab-td">{{typeData.orderWaterNum}}</div>
          <div class="tab-td">{{typeData.orderWaterSum}}</div>
        </div>
        <div class="tab-tr">
          <div class="tab-td tab-td__20">自营商品</div>
          <div class="tab-td">{{typeData.productNumA}}</div>
          <div class="tab-td">{{typeData.productSumA}}</div>
        </div>
        <div class="tab-tr">
          <div class="tab-td tab-td__20">其他商品</div>
          <div class="tab-td">{{typeData.productNumB}}</div>
          <div class="tab-td">{{typeData.productSumB}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FinanceDateChoose from '@/components/FinanceDateChoose'
  import {
    mapState
  } from 'vuex';
  import {
    PRODUCT_SELL_COUNT,
    PRODUCT_TYPE_COUNT
  } from '@/api/finance'


  export default {
    components: {
      FinanceDateChoose
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        searchDate: new Date().Format('yyyy'),
        searchDateType: 'year',
        sellList: [],
        typeData: {}
      }
    },
    mounted() {
      this.getSellData();
      this.getCountData();
    },
    methods: {
      getSellData() {
        this.$reqGet(PRODUCT_SELL_COUNT, {
          stationId: this.stationInfo.id,
          dateType: this.searchDateType,
          date: this.searchDate
        }).then(res => {
          if (res.code == 200) {
            this.sellList = res.rows;
          }
        });
      },
      getCountData() {
        this.$reqGet(PRODUCT_TYPE_COUNT, {
          stationId: this.stationInfo.id,
          dateType: this.searchDateType,
          date: this.searchDate
        }).then(res => {
          if (res.code == 200) {
            this.typeData = res.data;
          }
        });
      },
      dateChange(info) {
        this.searchDate = info.date;
        this.searchDateType = info.type;
        this.getSellData();
        this.getCountData();
      }
    }
  }

</script>
